<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <title>用户注册</title>
    <script>
        var code;

        function checkCode() {
            var verify = $("#code").val() == code;
            verify = true;
            if (verify) {
                handleArea();
                return true;
            }
            alert("验证码错误");
            return false;
        }

        function verificationCode() {
            $("#code_status").text("发送中...");
            var email = $("#email").val();
            $.ajax({
                url: "/phisoa/register/verificationCode",
                async: true,
                type: "POST",
                data: {
                    "email": email
                },
                success: function (data) {
                    if (data.status == 200) {
                        if (!isEmpty(data.msg)) {
                            $("#code_status").text("已发送");
                            code = data.msg;
                            return;
                        }

                    }
                    $("#code_status").text("发送失败");

                },
                error: function () {
                    $("#sendCode").val("发送失败");
                },
                dataType: "json"
            });
        }

        function isEmpty(obj) {
            if (typeof obj == "undefined" || obj == null || obj == "") {
                return true;
            } else {
                return false;
            }
        }
    </script>
</head>
<body>
<div class="container">
    <div class="raw">
        <div class="col-sm-6 col-sm-offset-3">
            <form action="/phisoa/register/user" method="post" enctype="multipart/form-data"
                  class="form form-horizontal" onsubmit="return checkCode();">

                <div class="form-group">
                    <label class="label label-info">电子邮箱</label>
                    <input type="email" name="email" id="email" class="form-control" value="530060499@qq.com">
                </div>

                <div class="form-group">
                    <label class="label label-info" for="password">密码</label>
                    <input type="password" id="password" name="password" class="form-control" value="123">
                </div>

                <div class="form-group">
                    <div class="checkbox">
                        <label th:each="item:${tags}" class="checkbox-inline">
                            <input type="checkbox" name="tagIds" th:value="${item.id}" th:text="${item.name}"/>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="code" placeholder="输入验证码">
                                </div>
                                <div class="col-sm-4">
                                    <label id="code_status" class="label label-success"></label>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <a id="sendCode" href="javascript:void(0)" onclick="verificationCode()">
                                发送验证码
                            </a>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-3 col-sm-offset-3">
                        <input type="submit" value="注册" class="btn btn-success btn-large">
                    </div>
                </div>
            </form>
        </div>
        3
    </div>
</div>
<script src="/static/area/js/distpicker.data.js"></script>
<script src="/static/area/js/distpicker.js"></script>
<script src="/static/area/js/main.js"></script>
</body>
</html>